import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Route, Switch } from 'react-router-dom'
import { observer, inject } from 'mobx-react'
import { toJS } from 'mobx'
import Products from 'views/product/Products'
import CreditCard from 'views/product/CreditCard'
import IndexPage from 'views/msite/IndexPage'
import Article from 'views/msite/Article'
import ArticleList from 'views/msite/ArticleList'
import GeneralList from 'views/msite/GeneralList'
import Profile from 'views/profile/Profile'
import { FooterNav } from 'components'

@inject('msiteStore')
@observer
class PageWithNav extends Component {
  static propTypes = {
    msiteStore: PropTypes.object.isRequired,
  };

  componentDidMount() {
    this.props.msiteStore.getFooterNav()
  }

  render() {
    const navList = toJS(this.props.msiteStore.footerNavList)
    return (
      <div>
        <Switch>
          <Route exact path="/products" component={Products} />
          <Route exact path="/creditCard" component={CreditCard} />
          <Route exact path="/profile" component={Profile} />
          <Route exact path="/iArticle/:id" component={Article} />
          <Route exact path="/iArticleList/:gid" component={ArticleList} />
          <Route exact path="/iGeneralList/:gid" component={GeneralList} />
          <Route component={IndexPage} />
        </Switch>
        <FooterNav navList={navList} />
      </div>
    )
  }
}

export default PageWithNav

